$(function () {
    // - 函数式编程; 
    // - 向做一个功能的时候，先创建一个函数; 
    // 记录每一个表单的验证状态;
    let validate_type = [{
            // 输入框的id值
            id: "tel",
            // 是否通过了验证
            type: false
        },
        {
            id: "code",
            type: false
        },
        {
            id: "username",
            type: false
        },
        {
            id: "password",
            type: false
        }
    ]

    // 绑定事件 : 
    function bindEvent() {
        $("input").focus(showTips);
        $("input").blur(hideTips);
        $("#tel").keyup(checkTel);
        $("#code").keyup(checkCode);
        $("#username").keyup(checkUserName);
        $("#password").keyup(checkPassword);
        $("#getCode").click(sendCode);
        $("#submit").click(validateForm);
    }

    // 验证表单提交
    function validateForm(e = evt) {
        // 编写一个逻辑， 判断当前所有的输入框是否都成功的进行了验证; 
        for (let i = 0; i < validate_type.length; i++) {
            // 如果有一个验证的状态为false，那么我们就阻止表单提交的默认事件; 
            if (!validate_type[i].type) {
                // 获取当前元素的id; 
                let id = validate_type[i].id;
                // 选择当前元素; 
                let ele = document.getElementById(id)
                // 让当前没有通过验证的元素获取焦点;
                ele.focus();
                e.preventDefault();
                return;
            }
        }

        //验证成功后提交验证，把信息传给后端
        let options = {
            url: "",
            type: "post",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: {
                tel: $("#tel").val(),
                username: $("#username").val(),
                password: $("#password").val()
            },
            dataType:"json"
        }

        let res = $.ajax(options)
            .done(function (res) {
                if (res.code === 1) {
                    alert("注册成功，马上为您跳转到登录页面");
                    setTimeout(function () {
                        location.href = "./login.html";
                    }, 2000)
                } else {
                    alert(data.message);
                }
            })
    }

    // 显示提示
    function showTips() {
        let next_ele = $(this).next();
        let value = $(this).val()
        if(!this.value){
            next_ele.show()
        }
    }

    // 隐藏提示
    function hideTips() {
        let next_ele = $(this).next("label");
        let index = $(this).index("form input")

        //失去焦点后进行判断是否隐藏
        if (!this.value){
            next_ele.text(next_ele.attr("data-default"))
        }
        if (validate_type[index].type === true) {
            next_ele.hide();
        }
    }

    // 手机号码验证 : 
    function checkTel() {
        let next_ele = this.nextElementSibling;
        let length = this.value.length

        // - 1.验证 value 的 length 是不是11个字符; 
        if (length < 11) {
            if (length === 0) {
                return pointOutError(next_ele, "请输入手机号")
            }
            return pointOutError(next_ele, "请输入正确的手机号")
        }

        // - 2. 验证是否手机号规则 ; 
        var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;
        if (!reg_tel.test(this.value)) {
            return pointOutError(next_ele, "请输入正确的手机号");
        }

        
        // 只要走到最后没有终止程序，那么就算是验证通过了; 
        next_ele.style.display = "none";
        validate_type[0].type = true;
    }

    // 发送验证码
    function sendCode() {
        let code = parseInt(Math.random() * Math.pow(10, 6));
        let options = {
            url: "https://www.hc.360.com/reg.html?sourcetypeid=1517",
            type: "POST",
            data: {
                code: code,
                tel: $("#tel").val()
            },
            dataType: "json"
        }
        if (!validate_type[0].type) {
            $.ajax(options);
        }
        return code
    }

    // 验证码验证; 
    function checkCode(code = "") {
        let next_ele = this.nextElementSibling;
        let length = this.value.length;

        // 长度验证; 
        if (length < 6) {
            if (length === 0) {
                return pointOutError(next_ele, "请输入短信验证码")
            }
            return pointOutError(next_ele, "请输入正确的验证码")
        }

        // - 2.一致性验证 
        //  - 获取验证码  // 怎么获取到验证码
        //  - 验证码与 value 是否一致
        if ($("#code").val !== code) {
            return false
        }

        // - 通过验证改变表单验证的状态
        validate_type[1].type = true;
        next_ele.style.display = "none";

    }

    // 确认用户名; 
    function checkUserName() {
        let next_ele = this.nextElementSibling;

        // -1.长度验证
        let length = this.value.length;
        if (length === 0) {
            return pointOutError(next_ele, "请输入会员名");
        }
        if (length < 4) {
            return pointOutError(next_ele, "请设置4-15位字母、字母+数字组合");
        }

        // - 2.正则验证
        let reg_name = /^\w{4,15}$/
        if (!reg_name.test(this.value)) {
            return pointOutError(next_ele, "请设置4-15位字母、字母+数字组合");
        }

        // 通过验证
        validate_type[2].type = true;
        next_ele.style.display = "none";

    }

    // 确认密码; 
    function checkPassword() {
        let next_ele = this.nextElementSibling;

        // -1.长度验证
        let length = this.value.length;
        if (length === 0) {
            return pointOutError(next_ele, "请输入密码");
        }
        if (length < 6) {
            return pointOutError(next_ele, "请设置6-15位字母、字母+数字组合");
        }

        // - 2.正则验证
        let reg_name = /^\w{4,15}$/
        if (!reg_name.test(this.value)) {
            return pointOutError(next_ele, "请设置6-15位字母、字母+数字组合");
        }

        // - 3.强度验证

        // 通过验证
        validate_type[3].type = true;
        next_ele.style.display = "none";

    }

    // 输入错误提示
    function pointOutError(dom, msg) {
        $(dom).text(msg).show();
    }

    bindEvent();
})